Typescript尝试

2018-07-21 admin

知乎

个人博客

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",
        ... //其他要忽略的文件或者正则表达式表示
  ]
}

原文链接:https://segmentfault.com/a/1190000015718138

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-36528.html

文章标题:Typescript尝试

相关文章
vue 集成 typescript Element UI 之懒人集成法
背景 最近有点时间,就想把我的vue项目版本升级一下,顺便在折腾一下typescript… 踩过的坑 element ui官方已经写了d.ts,但会有一个小坑,但issue都有解决方案… 正文 vue引入ts有好几种方案,一种引入是还是在....
2018-01-16
H5页面中尝试调起APP
&lt;a&gt;&lt;/a&gt; 目录 安卓版本5.0以上 IOS版本10.0以上 采用事件触发的方式处理唤醒APP 市面上常见的功能 这种功能现如今应该非常普遍了,淘宝H5,知乎H5等等。。。 点击后会调起APP或者打开下...
2017-12-28
用 TypeScript 和 css-in-js 的方式写 react app
Create react app with TypeScript &amp; css-in-js. Get Started Init a project: $ yarn add create-react-app -g $ create-r...
2017-12-27
使用webpack搭建基于typescript的node开发环境
原文地址:marxjiao.com/2018/04/10/… 正在学习node.js,这里介绍使用webpack来搭建基于typescript的node开发环境。 整个环境的必备功能 一套好的开发环境能让开发者专注于代码,而不必关系其它事情...
2018-04-22
用typescript写静态页面
typescript有许多的优点,对于已经上手angular开发的朋友想必都会很熟悉。那么,如果想在其其他非angular框架环境下使用typescript需要哪些步骤呢? 以下内容,我们将以一个静态页面为例,简述搭建typescrip...
2018-04-08
awesome-typescript-loader报watchRun问题
在学习webpack集成的过程中,遇到集成typescript时报如下错误“Can not read property ‘WatchRun’ of undefined”。如下图: 此时如果打开编译后的bundle.js在最底部会有如下代码...
2018-05-29
TypeScript极速完全入门-3ts结合react进行项目开发
前面我们已经说了大部分typescript的核心内容,接下来我们就说说如何用typescript开发实际项目。 因为angular和typescript结合很紧密,资料也很多,而且我会找机会专门说下这方面的知识,所以我们将重点放到如何用ty...
2018-04-27
小尝试!腾讯新闻React同构直出的优化实践
为什么做直出 就是为了“性能”!!! 按照经验来说,直出,能够减少20% - 50%不等的首屏时间,因此尽管增加一定维护成本,前端们还是前赴后继地在搞直出。 除此之外,有些特定的业务做直出能够弥补前后端分离带来的SEO问题。像这次选取的腾讯...
2018-03-21
你所不知道的 Typescript 与 Redux 类型优化
自从 Redux 诞生后,函数式编程在前端一直很热;去年7月,Typescript 发布 2.0,OOP 数据流框架也开始火热,社区更倾向于类型友好、没有 Redux 那么冗长烦琐的 Mobx 和 dob。 然而静态类型并没有绑定 OOP。...
2017-12-24
[官方] TypeScript 2.7 发布
{ 0: number; 1: string; length: 2; // using the numeric literal type ‘2’ } Note that this is a breaking change. If you ...
2018-02-02
回到顶部