阅读 335

TypeScript 入门介绍

TypeScript介绍

  • TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript。
  • TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行,并且是开源的。

为什么要用TypeScript

  • TypeScript简化了JavaScript代码,使其更易于阅读和调试。
  • TypeScript是开源的。TypeScript为JavaScript IDE 和实践提供了高效的开发工具,例如静态检查。
  • TypeScript使代码更易于阅读和理解。使用TypeScript,我们可以比普通的JavaScript做出巨大的改进。
  • TypeScript为我们提供了ES6(ECMAScript 6)的所有优点,以及更高的工作效率。
  • TypeScript可以帮助我们避免开发人员通过类型检查代码编写JavaScript时经常遇到的痛苦错误。强大的类型系统,包括泛型。
  • TypeScript只是带有一些附加功能的JavaScript。结构,而不是名义上的。
  • TypeScript代码可以按照ES5和ES6标准进行编译,以支持最新的浏览器。与ECMAScript对齐以实现兼容性。以JavaScript开始和结束。支持静态类型。
  • TypeScript将节省开发人员的时间。TypeScript是ES3,ES5和ES6的超集。

使用TypeScript

npm install typescript -g
tsc --version
复制代码
  • 新建一个文件夹,并使用npm init -y初始化。
  • 在终端中输入tsc --init:创建tsconfig.json文件,它是一个TypeScript项目的配置文件。
  • 编写一个index.ts,输入下面代码
let name: string = 'detanx'
console.log('name', name)
复制代码
  • 然后在终端中运行tsc index.ts,会在当前文件夹下生成一个index.js,使用node index.js会看到打印的结果。

声明文件

  • 当使用第三方库时,我们需要引用它的声明文件
声明语句
  • 假如我们想使用第三方库,例如jQuery,我们通常这样获取一个元素
jQuery('#id')
// index.ts(1,1): error TS2304: Cannot find name jQuery
declare var jQuery:(selector: string) =>any;
jQuery('#id')
复制代码
  • declare定义的类型只会在编译的时候检查,编译后会删除
声明文件
  • 把声明的类型放在一个单独的文件中,这就是声明文件
// jQuery.d.ts
declare var jQuery:(selector: string) =>any;
复制代码
  • 声明文件的结尾约定为.d.ts
  • 在使用的文件最开头使用三斜线指令引入
  • 三斜线指令是包含单个XML标签的单行注释。 注释的内容会做为编译器指令使用。
  • 三斜线指令仅可放在包含它的文件的最顶端。 一个三斜线指令的前面只能出现单行或多行注释,这包括其它的三斜线指令。 如果它们出现在一个语句或声明之后,那么它们会被当做普通的单行注释,并且不具有特殊的涵义。
/// <referrence path='./jQuery.d.ts' />
jQuery('#id')
复制代码
第三方声明文件
  • 现在很多库都有自带的第三方声明文件,@types/包名
npm install @types/jquery --save-dev
复制代码

TypeScript中的数据类型

基础数据类型

  • undefined : undefined类型,定义了一个变量,但没有给他赋予任何值
let name: undefined
复制代码
  • null :空类型,一个值为空
let name: null = null
复制代码
  • number:数值类型,数值类型,包括整数、浮点、NaN、Infinity、-Infinity
let age: number = NaN
复制代码
  • string : 字符串类型,由单引号或者双引号括起来的一串字符
let str: string = 'detanx'
复制代码
  • boolean: 布尔类型,boolean类型只有两种值,true和false。
let isMan: boolean = true
复制代码
  • enum:枚举类型,已知几个数据的对应关系
enum PEOPLE{ man , woman }
复制代码
  • any : 任意类型,即可以赋值为任意的数据类型
let anyType: any = 'string'
anyType = 1
...
复制代码
  • Tuple: 元组,合并了不同类型的对象
let people: [string, number]
people[0] = 'detanx'
people[1] = 12
复制代码
  • ......

类型声明场景

  1. 多类型,使用| 分割
let age: number | string = '18'
age = 19
复制代码
  1. 可选属性,使用?
interface IPerson<T> {
    name: string
    age?: number
}
复制代码
  1. 未知/额外属性
interface IPerson<T> {
    name: string
    age?: number
    [propName: string]: any; // 额外任意属性
}
复制代码
  1. 数组的声明方式
let array = string[] // 元素类型后跟上[],字符串数组
let arrat = Array<string> // 数组泛型
复制代码
  1. 可索引类型
interface StringArray {
    [index: number]: string;
}
let myArray: StringArray;
myArray = ["Bob", "Fred"];
let myStr: string = myArray[0];
复制代码

函数声明

  1. 声明方式
// 函数声明
function getName(name: string):string {
    return name
}
// 函数表达式
const getName = function (name: string):string {
    return name
}
// 箭头函数
const getName = (name: string):string=>{
    return name
}
复制代码
  1. 可选参数/默认值
const getName = (name: string, age?: number):string | number => {
    if(age) return age
    return name
}
const getName = (name: string, age: number = 10):string => {
    return name + age
}
复制代码

3.任意参数

const getName = (...args: any[]):string => {
    return args.join(',')
}
getName('detanx', 18)
复制代码

泛型

  • 创建时使用一个特殊字符代替声明的类型,在调用时声明数据的类型
function myfun<T>(args: T): T {
    return args
}
myfun<string>('string')
复制代码
  • 可以在创建时指定默认的类型
function myfun<T=string>(args: T): T {
    return args
}
复制代码
泛型约束
  • 传入的参数必须具备某一特新或属性等约定
interface IPerson {
    name: string
    age?: number
}
function myfun<T extends IPerson>(args: T): T {
    return args
}
// 传入的参数必须有name,age可有可无
console.log("泛型约束",myfun<IPerson>({name:'string'}))
复制代码
接口泛型
interface IPerson<T> {
    name: string
    age?: number
    // hobbit?: string[] // 元素类型后面接上 []
    hobbit?: Array<T> // 数组泛型
    height?: number | string
    weight?: number
    [propName: string]: any; // 额外任意属性
}

let detanx: IPerson<string> = {
    name: 'detanx',
    age: 10,
    hobbit: ['唱','跳','rap','篮球'],
    sex: '男',
    address: '成都'
}
复制代码
索引类型
function pluck<T, K extends keyof T>(o: T, names: K[]): T[K][] {
    return names.map(n => o[n]);
}
// keyof T -> keyof Person = 'name' | 'age'
// T[K] -> person['name'] 具有类型 Person['name'] = string

interface Person {
    name: string;
    age: number;
}
let person: Person = {
    name: 'Jarid',
    age: 35
};
let strings: string[] = pluck(person, ['name']);
复制代码

面向对象

修饰符
  • TypeScript语言和Java还有C#很像(因为我只会这两个面向对象的语言),类中属性的访问可以用访问修饰符来进行限制。访问修饰符分为:public、protected、private。
  1. public:公有修饰符,可以在类内或者类外使用public修饰的属性或者行为,默认修饰符。
  2. protected:受保护的修饰符,可以本类和子类中使用protected修饰的属性和行为。
  3. private : 私有修饰符,只可以在类内使用private修饰的属性和行为。
class Animal {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}

new Animal("Cat").name; // 错误: 'name' 是私有的.
复制代码
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");
复制代码
继承
  • extends
class Animal {
    private name: string;
    constructor(theName: string) { this.name = theName; }
    public say() {
        console.log('name',this.name)
    }
}

class Rhino extends Animal {
    constructor() { super("Rhino"); }
}

class Employee {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}

let animal = new Animal("Goat");
let rhino = new Rhino();
let employee = new Employee("Bob");

rhino.say()
animal = rhino;
animal = employee; // 错误: Animal 与 Employee 不兼容.
复制代码
  • 类方法的重写
class Rhino extends Animal {
    constructor() { super("Rhino"); }
    public say(){
        super.say()
        console.log('Rhino name')
    }
}
let rhino = new Rhino();
rhino.say()
复制代码
命名空间
  • 命名空间一个最明确的目的就是解决重名问题。
namespace beijing{
    export class Detanx{
        public name:string = 'detanx'
        talk(){
            console.log('我是北京detanx。')
        }
    }
}

namespace chengdu{
    export class Detanx{
        public name:string = 'detanx'
        talk(){
            console.log('我是成都detanx。')
        }
    }
}

let detanx1:beijing.Detanx   = new beijing.Detanx()
let detanx2:chengdu.Detanx   = new chengdu.Detanx()
detanx1.talk()
复制代码

参考

TypeScript官方文档
jspang TypeScript免费视频课程