快速上手

Created: May 10, 2021 9:34 AM

一、5分钟了解 TypeScript

1. 安装TypeScript

有两种主要的方式来获取TypeScript工具：

  • 通过npm（Node.js包管理器）
  • 安装Visual Studio的TypeScript插件
  1. npm install -g typescript

2. 构建你的第一个TypeScript文件

  1. // 给person函数的参数添加: string类型注解
  2. function greeter(person: string) {
  3.     return "Hello, " + person;
  4. }
  6. let user = "Jane User";
  8. document.body.innerHTML = greeter(user);

3.类型注解

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式.

TypeScript提供了静态的代码分析，它可以分析代码结构和提供的类型注解。

就算你的代码里有错误，但仍然可以使用TypeScript。但在这种情况下，TypeScript会警告你代码可能不会按预期执行

4.接口

TypeScript里，只在两个类型内部的结构兼容那么这两个类型就是兼容的。 这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用implements语句

  1. interface Person {
  2.     firstName: string;
  3.     lastName: string;
  4. }

5.类

TypeScript支持JavaScript的新特性，比如支持基于类的面向对象编程。

构造函数的参数上使用public等同于创建了同名的成员变量

  1. class Student {
  2.     fullName: string;
  3.     constructor(public firstName: string, public middleInitial: string, public lastName: string) {
  4.         this.fullName = firstName + " " + middleInitial + " " + lastName;
  5.     }
  6. }
  8. interface Person {
  9.     firstName: string;
  10.     lastName: string;
  11. }
  13. function greeter(person : Person) {
  14.     return "Hello, " + person.firstName + " " + person.lastName;
  15. }
  17. let user = new Student("Jane", "M.", "User");
  19. document.body.innerHTML = greeter(user);

二、Gulp

如何使用Gulp构建TypeScript，和如何在Gulp管道里添加Browserify，uglify或Watchify。 它还包涵了Babel的功能，通过使用Babelify。

1. 创建简单工程

  1. mkdir typescriptL
  2. cd typescriptL
  3. mkdir src
  4. mkdir dist

2. 初始化工程

现在让我们把这个文件夹转换成npm包：

  1. npm init
  2. # 按提示进行输入

3. 安装依赖项

  1. npm install -g gulp-cli
  2. npm install --save-dev typescript gulp gulp-typescript

4. 举一个例子

/Users/miaoshike/Documents/gitee/typescriptL

5. Browserify/ Watchify，Babel和Uglify日后用了再学

三、React与webpack

1. 初始化项目结构

  1. proj/
  2. ├─ dist/
  3. └─ src/
  4.    └─ components/

TypeScript文件会放在src文件夹里，通过TypeScript编译器编译，然后经webpack处理，最后生成一个bundle.js文件放在dist目录下。 我们自定义的组件将会放在src/components文件夹下。

2.安装依赖

  1. npm install -g webpack
  2. npm install --save react react-dom @types/react @types/react-dom
  3. ## 这些依赖会让TypeScript和webpack在一起良好地工作。
  4. # awesome-typescript-loader可以让Webpack使用TypeScript的标准配置文件tsconfig.json编译TypeScript代码。 
  5. # source-map-loader使用TypeScript输出的sourcemap文件来告诉webpack何时生成自己的sourcemaps。 这就允许你在调试最终生成的文件时就好像在调试TypeScript源码一样。
  6. npm install --save-dev typescript awesome-typescript-loader source-map-loader

3.添加TypeScript配置文件

  1. {
  2.     "compilerOptions": {
  3.         "outDir": "./dist/",
  4.         "sourceMap": true,
  5.         "noImplicitAny": true,
  6.         "module": "commonjs",
  7.         "target": "es5",
  8.         "jsx": "react"
  9.     },
  10.     "include": [
  11.         "./src/**/*"
  12.     ]
  13. }

4.写些代码

5. 创建一个webpack配置文件

6. 执行

执行：

  1. webpack

运行src/index.html

四、React

这篇快速上手指南会教你如何将TypeScript与React结合起来使用。 在最后，你将学到：

  • 使用TypeScript和React创建工程
  • 使用TSLint进行代码检查
  • 使用Jest和Enzyme进行测试，以及
  • 使用Redux管理状态

1. 安装create-react-app

  1. npm install -g create-react-app

2. 创建项目

  1. npx create-react-app react-app --template typescript

3.运行工程/测试工程

  1. yarn start 
  2. yarn test

4.创建一个组件