TypeScript入坑

chuyao 發(fā)布于2019-08-23 12:25 / 657人閱讀

摘要：入坑安裝使用安裝使用全局方式安裝編輯器安裝插件編譯使用進行編譯編寫文件編譯上方為編譯好的文件類型注解將其注解為類型將其注解為類型變量聲明由于沒有塊級作用域，使用會出現(xiàn)以下問題仍然可以訪問為，由于的變量作用注冊在作用域鏈上造成的結(jié)果，解決方

TypeScript 入坑

安裝

使用npm安裝
使用全局方式安裝

npm install -g typescript

編輯器

安裝插件 https://github.com/Microsoft/...
https://packagecontrol.io/pac...
編譯使用node.js進行編譯

hello world

編寫ts文件

function greeter(person) {
    return "Hello world!" + person;
}
let user = "hello world";

document.body.innerHTML = greeter(user);

編譯

PS C:UsersmingmDesktop	s> tsc greeter.ts
Active code page: 65001
PS C:UsersmingmDesktop	s>

上方為編譯好的js文件

function greeter(person) {
    return "Hello world!" + person;
}
var user = "hello world";
document.body.innerHTML = greeter(user);

類型注解

function greeter(person: string){    // 將其注解為string類型
    return "hello," + person;
}

let user = [0, 1, 2];
document.body.innerHTML = greeter(user);

將其注解為string類型

變量聲明

由于js沒有塊級作用域，使用var會出現(xiàn)以下問題

for(var i = 1: i <= 10; i++) {
}
console.log(i);

仍然可以訪問i為10，由于js的變量作用注冊在作用域鏈上造成的結(jié)果，解決方案，使用閉包

let

let屬于塊級作用域

const

賦值以后不能再改變

解構(gòu)賦值

let input = [1,2];
let input1 = [2,3];
// 解構(gòu)賦值
[input[0], input[2]] = [2,3]
// 同樣的也可以創(chuàng)建剩余變量
let[first,...rest] = [1,2,3,4,5];
// first 為 1， rest 為[2,3,4,5]

聯(lián)合類型

let myFavoriteNumber: string | number
myFavoriteNumber = "seven";
myFavoriteNumber = 7;

var myFavoriteNumber;
myFavoriteNumber = "seven";
myFavoriteNumber = 7;

訪問聯(lián)合類型的屬性和方法

只能訪問共有的屬性和方法

function getString(something:string | number):string {
    return something.toString();
}

function getString(something) {
    return something.toString();
}

接口

對類的一部分行為進行抽象（即方法）抽象出接口。

防盜門和車都有報警這個方法，將報警這個方法抽象出來，成為這兩個的接口

接口建議名稱前加上I

// 定義一個接口，接口的類型名稱為person
interface Iperson{
    name: string;
    age: number;
}

// 使用接口
function greeter(person: Iperson):string {
    return "hello world" + person.name + person.age;
}

// 傳入對象
let user = { name: "hello world", age: 23 };
// 調(diào)用
document.body.innerHTML = greeter(user);

// 使用接口
function greeter(person) {
    return "hello world" + person.name + person.age;
}
// 傳入對象
var user = { name: "hello world", age: 23 };
// 調(diào)用
document.body.innerHTML = greeter(user);

可選屬性

// 定義一個接口，接口的類型名稱為person
interface Iperson{
    name: string;
    age?: number;
}

// 使用接口
function greeter(person: Iperson):string {
    return "hello world" + person.name + person.age;
}

// 傳入對象
let user = { name: "hello world"};
// 調(diào)用
document.body.innerHTML = greeter(user);

// 使用接口
function greeter(person) {
    return "hello world" + person.name + person.age;
}
// 傳入對象
var user = { name: "hello world" };
// 調(diào)用
document.body.innerHTML = greeter(user);

接口傳入任意值

// 定義一個接口，接口的類型名稱為person
interface Iperson{
    name: string;
    age?: number;
    [propName: string]: any;    // 任意數(shù)據(jù)取string類型的值
}

// 使用接口
function greeter(person: Iperson):string {
    return "hello world" + person.name + person.age + person.ming;
}

// 傳入對象
let user = { name: "hello world", ming:"hello world"};
// 調(diào)用
document.body.innerHTML = greeter(user);