TypeScript入坑

chuyao 發布于2019-08-23 12:25 / 667人閱讀

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

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會出現以下問題

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

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

let

let屬于塊級作用域

const

賦值以后不能再改變

解構賦值

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

聯合類型

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

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

訪問聯合類型的屬性和方法

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

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 };
// 調用
document.body.innerHTML = greeter(user);

// 使用接口
function greeter(person) {
    return "hello world" + person.name + person.age;
}
// 傳入對象
var user = { name: "hello world", age: 23 };
// 調用
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"};
// 調用
document.body.innerHTML = greeter(user);

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

接口傳入任意值

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98474.html

入坑codewars

摘要：，黑色的主題風格，很符合。時間復雜度雖然成功，但我明顯感覺代碼寫得不是很優雅。這個是沒錯的，但缺乏了宏觀的視角，會變得片面。但是不重要，關鍵是這個思想要學習，可以應用到其他地方。求和，大于就返回偶數的位置，否則返回奇數的位置。前幾天做LeetCode上的大數乘法，代碼沒錯，可就是提交不成功，顯示SyntaxError: Unexpected token var我把所有代碼都注釋掉，只...

sherlock221 2019-08-26 12:10 評論0 收藏0
Ionic2入坑基礎教程和安裝指南

摘要：安裝程序主要通過命令行工具來創建和開發，并使用來構建和部署為原生應用程序?；A教程確保完成之前的安裝并測試啟動成功。安裝Ionic Ionic 2 程序主要通過Ionic命令行工具CLI來創建和開發，并使用Cordova來構建和部署為原生應用程序。也就是說我們需要先安裝一些工具來實現程序開發。安裝Ionic CLI 和 Cordova 要創建 Ionic 2 項目，你需要安裝最新版...

jayce 2019-08-21 14:35 評論0 收藏0
兩年React老兵的總結 - 類型檢查篇

摘要：系列引言最近準備培訓新人為了方便新人較快入手開發并編寫高質量的組件代碼我根據自己的實踐經驗對組件設計的相關實踐和規范整理了一些文檔將部分章節分享了出來由于經驗有限文章可能會有某些錯誤希望大家指出互相交流由于篇幅太長所以拆分為幾篇文章主要有以系列引言最近準備培訓新人, 為了方便新人較快入手 React 開發并編寫高質量的組件代碼, 我根據自己的實踐經驗對React 組件設計的相關實踐...

scola666 2019-08-23 18:38 評論0 收藏0
2017個人總結

摘要：特此寫個流水賬總結，供自己以后羞恥的回顧。正逢月計劃辭職回家玩游戲過個暑假，結果在如今部門老大的忽悠下加入到了新東家。和組長兩人繼續沒晝夜的忙活，最終也按時交差，上了線。卷土重來，回報過去的一份念舊，期待的美好，個人選型入坑。前言 2017年發生了太多的事情，結了婚，住進了新家，成功的播了種，當上了準爸爸。公司也蒸蒸日上搬進了高大上的寫字樓。前端的坑越來越大，都來不及填。特此寫個流水...

Jason 2019-08-22 13:49 評論0 收藏0
前端小報 - 201903月刊

摘要：熱門文章我在淘寶做前端的這三年紅了櫻桃，綠了芭蕉。文章將在淘寶的三年時光折射為入職職業規劃招聘晉升離職等與我們息息相關的經驗分享，值得品讀。 showImg(https://segmentfault.com/img/remote/1460000018739018?w=1790&h=886); 【Alibaba-TXD 前端小報】- 熱門前端技術快報，聚焦業界新視界；不知不覺 2019 ...

李義 2019-08-30 15:43 評論0 收藏0