Typescript尝试

头像
RainyCG
    阅读 6 分钟
    1

    知乎

    个人博客

    Github

    最近入职，发现公司使用到typescript，所以就在此留下一个笔记，方便自己和大家一起学习。

    TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个严格超集，并添加了可选的静态类型和基于类的面向对象编程。

    大家日常学习可以去TS Playground测试一些代码

    那我们就来开始学习吧！

    基本类型的定义

    在使用TS之前，我们定义的JavaScript变量都是弱类型语言，它不像C，Java这种，会在编译的时候对变量进行类型检查，所以有的时候会出现意想不到的Bug。

    使用TS我们可以处理很简单的数据类型：

    Boolean类型

    // boolean
let isEmpty: boolean = true;
// Type '"false"' is not assignable to type 'boolean'.
isEmpty = 'false'; 
isEmpty = false;

    Number类型

    // number
let num: number = 10;
// Type '"1"' is not assignable to type 'number'.
num = '1';
num = 1;

    String类型

    // string
let github_name: string;
github_name = 120;
github_name = 'Rain120';

    Array类型

    // array
let arr: number[];
arr = [1, '2', 3];
arr = [1, 2, 3];

let arr1: Array<number>;
arr1 = [1, '2', 3];
arr1 = [1, 2, 3];

let fe: string[];
fe = [1, 2, 3]; // TS
fe = ['Vue', 'React', 'Angular'];

    不确定什么属性

    // any
let type_con: any;
type_con = [];
type_con = {};
type_con = 1;
type_con = '2';
type_con = true;
type_con.func();

    Void

    //void
let test_void: void = null;
test_void = 1;

    Function定义

    function vo(): void {
    console.log('这是一个返回值为void的函数');
}

function vo1(): void {
    console.log('这是一个返回值为void的函数');
    return '';
}

function str(): string {
    console.log('这是一个返回值为string的函数');
}
function str1(): string {
    console.log('这是一个返回值为string的函数');
    return 'string';
}

    TS 编辑函数报错1
    TS 编辑函数报错2
    当我们在使用函数的时候，有些时候会使用到函数参数默认，或者可选参数，那么在TS中如何写呢？

    function game(name: string, rank?: string, score: number = 0): string {
    return `${name} ${rank} ${score}`
}
console.log(game('rainy', 'difficult', 10000));
console.log(game('rainy', 'difficult'));
console.log(game('rainy'));

    默认参数、可选参数

    Class类

    class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    greet() {
        console.log(`Hello, ${this.name}`);
    }
}

class Student extends Person {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        super(name);
        this.age = age;
    }
    greet() {
        console.log(`Hello, My name is ${this.name} and I'm ${this.age}`);
    }
    study() {
        console.log(`${this.name}, you should go to study.`)
    }
}

let p = new Person('Rain120');
console.log('p:', p.name)
p.greet()

let stu = new Student('Rain', 21);
console.log('stu:', stu.name, stu.age);
stu.greet();
stu.study();

    我们在学习面向对象的语言，C++和Java时候知道类的属性和方法是有修饰符的，他们决定了外部是否能够访问类中的属性、方法，当用户为定义是，属性和方法默认都是public 属性，其中还有protected 和private 属性。当你使用private 修饰符定义成属性或者方法时，如果你需要让其他使用者使用这个属性时，你可以定义一个public 的方法，之后用户只能通过这个API接口来获取属性值或者方法的结果，例如：

    class Person {
    private name: string;
    constructor(name: string) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}
let p = new Person('Rain120');
console.log('person name:', p.name)
console.log('person name:', p.getName())

    private修饰符

    虽然这里报错了，但是编译结果却是可以的应为TS在转换成JS语言后，并没有真的将name编译成私有的属性，TypeScript的核心原则之一是对值所具有的结构进行类型检查，它的作用只是提示开发者。

    protected 修饰符与private 修饰符的行为很相似，但有一点不同，protected 成员在派生类中仍然可以访问, 这就不详细讲解这些了，大家可以去学习下Java或者C++的类，感受一下。

    接口（Interface）

    在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。这句话太官方了，我自己理解的就是它定义了一些你自己约定的参数类型。

    工作中，我们使用到的是React+Typescript，所以，我把我日常写法拿出来。

    interface SystemsProps {
    systems: any
}
export class Systems extends React.Component<SystemsProps, any>
    ...
    render() {
       const { systems } = this.props
       return (
          <div>{systems.name}</div>
       )
    }
}

    当然，从C++中学到接口也是可以继承的，例如：

    interface Color{
    color: string;
}
interface Car extends Color{
    price: number;
}
let car = <Car>{};
car.color = "white";
car.price = 10000000;

    泛型

    在像C++和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。

    其实我们之前有用到泛型，只是没有说到这个概念。

    let arr: Array<number> = [1, 2, 3, 4];

    这是一个最简答你的泛型，定义了一个number类型的数组，下面我写一个复杂点的泛型：

    class Fruit {
    name: string;
    price: number;
    constructor(name: string, price: number) {
        this.name = name;
        this.price = price;
    }
    sold() {
        console.log(`${this.name} sold $${this.price}`)
    }
}

let fruit: Array<Fruit> = []
fruit[0] = new Fruit('apple', 8)
fruit[1] = new Fruit('banana', 5)
fruit[2] = new Fruit('lemon', 10)
console.log(fruit)

    泛型类

    这个泛型是一个Fruit类型的数组，这个数组的子元素全是Fruit类型，当我们定义一个其他类型是，例如

    fruit[3] = { name: 'watermelon', price: 2 }

    泛型类报错

    类型推断机制

    let num = 10;
num = 'str';

    我们平常在使用变量赋值的时候，这样写是没有问题，但是使用TS类型检查后，它会根据用户第一次定义或者赋值的类型来推断该变量的类型，这就是TS的类型推断机制。
    TS的类型推断机制报错

    迭代器

    这里我们讲下我们常见的几种的迭代器，包括for-in, for-of，用来跟forEach对比，直接上代码，我们从代码来分析它们之间的不同

    let arr: any = ['a','b','c'];
arr.type = 'array'

arr.forEach((item, index) => {
   console.log('forEach', index, item, arr[index]);
})

for (let i in arr) {
    console.log('for-in', i, arr[i]);
}

let obj = {
    'a': 'I\'m a',
    'b': 'I\'m b',
    'c': 'I\'m c'
}

for (let i of arr) {
    console.log('for-of', i, obj[i]);
}

    迭代器结果

    从结果上来看，

    forEach：只是常见的for循环，它不会遍历该对象的属性值；
    for-in：迭代的是对象的键（key）的列表，它会遍历对象的属性；
    for-of：迭代对象的键对应的值（value），它也不会遍历对象的属性。

    模块

    这个地方熟悉CommonJS的都会知道export（导出）， import（导入），所以这里就不详细讲了，直接跳过

    最后讲一下，tsconfig.json的配置，详见tsconfig.json

    {
  "compilerOptions": {
    "moduleResolution": "node",
    "outDir": ./dist", // 生成的所有文件放在dist目录下
    "target": "es5", // 将JavaScript代码降级到低版本ECMAScript 5
    "lib": ["es6", "dom"],
    "rootDir": "app/", //仅用来控制输出的目录结构。
    "jsx": "react", // 用于指定按照何种方式生成jsx代码，可选react和preserve。
    "module": "esnext", // 用于指定模块的代码生成规则，可以使用 commonjs 、 amd 、 umd 、 system 、 es6 、 es2015 、 none 这些选项。
    "declaration": false, // 是否需要生成定义文件d.ts，设置为true，则生成
    "allowJs": true,  // 接受JavaScript做为输入
    "allowSyntheticDefaultImports": true, // 置为true时，则允许从没有默认导出的模块中默认导入(也就是不做检查)。
    "inlineSourceMap": false, // 是否需要将sourceMap文件生成到js文件中，设置为true，则生成到js文件中。
    "sourceMap": true, // 把 ts 文件编译成 js 文件的时候，同时生成对应的 map 文件
    "noEmitOnError": false, // 设置为true时，如果遇到了错误，就不再输出
    "emitDecoratorMetadata": false, // 设置为true，则使用元数据特性
    "experimentalDecorators": true, // 设置为true，则支持ES7的装饰器特性
    "noImplicitReturns": true, // 会防止你忘记在函数末尾返回值
    "noImplicitThis": false,
    "noImplicitUseStrict": false, // 当设置为true时，编译输出时不会调用'use strict'指令（也就是不生成use strict）
    "noImplicitAny": false, // 如果编译器无法根据变量的用途推断出变量的类型，它就会悄悄的把变量类型默认为 any。
    "noUnusedLocals": false, 
    "baseUrl": "app",
    "paths": {
      "app": ["app"]
    }
  },
  // 包括app下的所有.ts（对应js文件）, .tsx（对应jsx文件）文件
  "include": [
    "app/**/*.ts",
    "app/**/*.tsx"
  ],
   // 忽略node_modules下所有的文件
  "exclude": [
        "node_modules",
        ... //其他要忽略的文件或者正则表达式表示
  ]
}
    Microsofttypescript前端代码检查
    RainyCG
    722 声望23 粉丝

    18应届，前端菜鸟

    « 上一篇
    Jquery + dataTable + Bootstrap + 完整逻辑实现表格的增删改查
    下一篇 »
    Vue实现左右菜单联动实现

    引用和评论

    推荐阅读
    头像
    这些前端资源，你值得拥有

    RainyCG赞 91阅读 8k

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    0 条评论
    得票最新