当前播放: 04 | 编写你的第一个TypeScript程序
00:00 / 00:00
高清
  • 高清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看
课程目录
第一章:基础篇 (21讲)
01 | 重塑“类型思维”
免费
02 | 类型基础(1):强类型与弱类型
免费
03 | 类型基础(2):动态类型与静态类型
免费
04 | 编写你的第一个TypeScript程序
免费
05 | 基本类型
免费
06 | 枚举类型
07 | 接口(1):对象类型接口
08 | 接口(2):函数类型接口
09 | 函数相关知识点梳理
10 | 类(1):继承和成员修饰符
11 | 类(2):抽象类与多态
12 | 类与接口的关系
13 | 泛型(1):泛型函数与泛型接口
14 | 泛型(2):泛型类与泛型约束
15 | 类型检查机制(1):类型推断
16 | 类型检查机制(2):类型兼容性
17 | 类型检查机制(3):类型保护
18 | 高级类型(1):交叉类型与联合类型
19 | 高级类型(2):索引类型
20 | 高级类型(3):映射类型
21 | 高级类型(4):条件类型
第二章:工程篇 (10讲)
22 | ES6与CommonJS的模块系统
23 | 使用命名空间
24 | 理解声明合并
25 | 如何编写声明文件
26 | 配置tsconfig.json(1):文件选项
27 | 配置tsconfig.json(2):编译选项
28 | 配置tsconfig.json(3):工程引用
29 | 编译工具:从ts-loader到Babel
30 | 代码检查工具:从TSLint到ESLint
31 | 使用Jest进行单元测试
第三章:实战篇 (16讲)
32 | 创建项目
33 | 组件与类型(1):函数组件与类组件
34 | 组件与类型(2):高阶组件与Hooks
35 | 事件处理与数据请求
36 | 列表渲染与路由
37 | Redux与类型
38 | 搭建服务端开发环境
39 | 列表的CRUD
40 | 导出Excel
41 | 搭建Vue开发环境
42 | 组件封装
43 | 组件发布
44 | 共存策略
45 | 宽松策略
46 | 严格策略
47 | 结束语
04 | 编写你的第一个TypeScript程序

04 | 编写你的第一个TypeScript程序

梁宵
搜狗营销事业部高级架构师
47讲 约450分钟3104
单独订阅¥129
2人成团¥99
6
本节摘要
登录 后留言

精选留言(31)

  • 故事、自己写
    多年之后又开始写Hello World!
    2019-07-17
    7
  • TechCheng
    极客时间的web版播放视频暂停会出现bug:①大概率暂停会自动播放②小概率暂停后自动重新开始播放。根本没法安静坐在电脑前看视频敲代码学习啊!!!!
    2019-08-11
    2
    3
  • Chope
    老师很赞,买一送一,很喜欢老师顺带讲了webpack的配置,之前一直不清楚,现在清晰明了,非常感谢老师
    2019-07-20
    1
    2
  • h.林.p
    npm run build 报错,是webpack现版本不允许这样配置了吗
    Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
     - configuration has an unknown property 'plugin'. These properties are valid:
       object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
       For typos: please correct them.
       For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
         Loaders should be updated to allow passing options via loader options in module.rules.
         Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
         plugins: [
           new webpack.LoaderOptionsPlugin({
             // test: /\.xxx$/, // may apply this only for some modules
             options: {
               plugin: …
             }
           })
         ]

    作者回复: 是拼写错了吧,plugins,不是plugin

    2019-10-29
    1
  • h.林.p

    老师,npm start 之后报这个错误,编译失败
    ERROR in (webpack)-dev-server/client?http://localhost:8081
    Module not found: Error: Can't resolve './overlay' in '/Users/helinpeng/Documents/ts_in_action/node_modules/webpack-dev-server/client'
     @ (webpack)-dev-server/client?http://localhost:8081 10:14-34
     @ multi (webpack)-dev-server/client?http://localhost:8081 ./src/index.js
    2019-10-29
    2
    1
  • 康+禾
    想问一下,老师用的vscode有预装视频展示之外的插件吗,我平常工作时候用的webstorm比较多,不知道可不可以直接搬到上面用,会有影响吗

    作者回复: 视频展示之外的插件是指什么?没明白

    2019-10-22
    1
    1
  • 雨刃
    @all
    感谢 @Geek_144c1d 同学指出了一个 webpack.config.js 配置的错误,正确的写法应该是:
    const merge = require('webpack-merge')
    const baseConfig = require('./webpack.base.config')
    const devConfig = require('./webpack.dev.config')
    const proConfig = require('./webpack.pro.config')

    module.exports = (env, argv) => {
        let config = argv.mode === 'development' ? devConfig : proConfig;
        return merge(baseConfig, config);
    };
    2019-07-23
    1
    1
  • Geek_144c1d
    webpack.config.js 中的配置是错误的, 应该是`process.env.NODE_ENV`, 且需要将导出作为函数给webpack调用才能获取正确的传入值

    作者回复: 感谢指正,我稍后全体回复一下正确的配置

    2019-07-23
    1
  • 何以庆余年
    老师,这里的div为什么使用class而不是用id呢?id不是更好一些吗?

    作者回复: 网上有很多解释了,我说一些不同的,实际项目中id一般会留作它用,比如统计埋点、自动化测试等,所以一般习惯写class

    2019-07-19
    1
  • 矫健的胖虎
    使用VS Code编辑器的同学们,我推荐一个插件。在VS Code插件库中搜索“TypeScript Auto Compiler”,安装上这个插件,然后在项目工程里tsc --init之后,生成了tsconfig.json文件。之后每次保存ts文件就会自动生成对应的js文件。超级方便的~
    2019-12-29
  • Hyman
    git 仓库在哪里??那四个配置文件看不懂...
    2019-12-25
  • 你若盛开 清风自来
    npm i webpack webpack-cli webpack-dev-server -D 在win上面就卡死了,不动 哎
    2019-12-14
    1
  • 贝壳
    老师,请问一下,Typescript只安装了全局的,执行npm start 提示找不到模块Typescript,项目本地安装以后就正常了。这里,如果项目本地没有安装,不会去找全局下的Typescript吗?

    作者回复: 不会去找全局,具体项目还需要本地安装ts

    2019-12-11
  • FEA-Dven
    dev环境运行报如下错误,主要是webpack.dev.config.js写法问题。
    Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
     - configuration has an unknown property 'devtools'. These properties are valid:
       object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?,entry?, externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
       For typos: please correct them.
       For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
         Loaders should be updated to allow passing options via loader options in module.rules.
         Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
         plugins: [
           new webpack.LoaderOptionsPlugin({
             // test: /\.xxx$/, // may apply this only for some modules
             options: {
               devtools: …
             }
           })
         ]

    module.exports = {
        devtools: 'cheap-module-eval-source-map'
    }
    更改为
    const webpack = require('webpack');
    module.exports = {
        plugins: [
            new webpack.LoaderOptionsPlugin({
                options: {
                    devtools: 'cheap-module-eval-source-map'
                }
            })
        ]
    }
    dev就可以正常运行了,不知道是不是webpack版本更新的原因。

    作者回复: 拼错了,应该是 devtool,不是devtools

    2019-12-02
  • 秋簌。
    老师为什么安装完webpack webpack-cli 之后没有视频中bulid里的几个配置文件生成

    作者回复: 配置文件是需要自己写的

    2019-11-06
  • 13601994625
    我看到这里document应该会报错啊。怎么解决。

    作者回复: 建议你在 src 下只留 index.ts 和 tpl 文件夹,用到什么代码再拷贝进来。因为 ts-base 是很多节课的代码放在一起的,有些变量会重名。

    2019-09-07
  • Geek_148520
    let hello : string = "Hello word typescript"
    document.querySelectorAll('.app')[0].innerHTML = hello;
    document.querySelector('.app').innerHTML = hello;
    console.log("document.querySelectorAll('.app')[0]:",document.querySelectorAll('.app')[0])
    console.log("document.querySelector('.app'):",document.querySelector('.app')),为啥,我用querySelector选择器不能点出方法??

    作者回复: document.querySelector('.app') 这个结果可能为null,VSCode会报错,就不会有自动提示了。

    2019-09-07
    1
  • Jaykey
    webpack-merge 这个感觉很不错,能过把打包的逻辑合并起来,可以把对配置的共有部分合并一下。
    2019-09-02
  • 火云邪神0007
    您长得,特别像一个游戏解说,大司马
    2019-08-14
    1
  • wyq
    老师, 有一个地方不是很理解, 运行时的devtool: 'cheap-module-eval-source-map', 列信息 和 sourcemap是什么意思呀

    作者回复: 页面报错时,sourcemap 可以用来定位错误发生的位置,一般只需要行信息就可以了

    2019-08-08
收起评论
看过的人还看
浏览器工作原理与实践

李兵  前盛大创新院高级研究员

43讲 | 6373 人已学习

拼团 ¥79 原价 ¥99
Node.js开发实战

杨浩  腾讯高级工程师

57讲 | 3941 人已学习

拼团 ¥99 原价 ¥129
JavaScript核心原理解析

周爱民  《JavaScript语言精髓与编程实践》作者,南潮科技(Ruff)首席架构师

21讲 | 3721 人已学习

拼团 ¥55 原价 ¥68
玩转webpack

程柳锋  腾讯高级工程师,IVWEB团队社区和工程化负责人

84讲 | 5542 人已学习

拼团 ¥79 原价 ¥99