快捷導(dǎo)航

TypeScript學(xué)習(xí)筆記中的的基本概念和用法

更新時(shí)間：2026年02月20日 10:43:49 作者：葒色海灣

本文主要介紹了TypeScript學(xué)習(xí)筆記中的的基本概念和用法,包括命令行編譯、自動(dòng)化編譯、類(lèi)型系統(tǒng)、面向?qū)ο缶幊蹋?lèi)、屬性修飾符、抽象類(lèi)、接口）、泛型、類(lèi)型聲明文件以及裝飾器

1.初始TypeScript

2.直接上手

都是學(xué)過(guò)Java的人，這個(gè)很簡(jiǎn)單

1.命令行編譯

要把.ts文件編譯為.js文件,需要配置Typescript的編譯環(huán)境1，步驟如下:

1.第一步：創(chuàng)建一個(gè)demo.ts文件

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

console.log(`我叫${person.name}，今年${person.age}歲，來(lái)自${person.city}`);

2.第二步：全局安裝Ts環(huán)境

npm i typescript -g

tsc 命令與 java 同理

3.第三步

編譯 ts 文件與 javac 同理

Java 是吧 .java 編譯成 .class tsc 是把 .ts 編譯成 .js

tsc demo

2.自動(dòng)化編譯

3.寫(xiě)法

前面和kotlin很像這里就不多說(shuō)了

4.類(lèi)型總覽

5.常用類(lèi)型

1.any

2.unknown

3.never

4.void

5.object

標(biāo)識(shí) key字符串值為any 往后面存可以對(duì)對(duì)象追加屬性

6.tuple

7.enum

8.type

類(lèi)型做運(yùn)算

9.一個(gè)特殊的情況

TypeScript: Documentation - More on Functions
官網(wǎng)

6.復(fù)習(xí)類(lèi)相關(guān)知識(shí)

7.屬性修飾符

readonly === final

8.抽象類(lèi)

9.接口

注意 ts 的接口可以有屬性的啊

定義對(duì)象

定義函數(shù)

接口的重復(fù)定義

一些相似的概念的區(qū)別

10.泛型

11.類(lèi)型聲明文件

為了在 ts 中引入 js函數(shù) ，聲明一個(gè) d.ts 文件然后 declare關(guān)鍵字放在同名 .js同文件夾下，然后引入JS 的 ts 就會(huì)有類(lèi)型約束了

一般會(huì)放入一個(gè) 叫 @types 文件夾下規(guī)范管理

像JQuery庫(kù) 它自己幫我們寫(xiě)好了 .d.ts 文件統(tǒng)一導(dǎo)出的，所以一般不用程序員自己寫(xiě)

總結(jié)

到此這篇關(guān)于TypeScript學(xué)習(xí)筆記中的的基本概念和用法的文章就介紹到這了,更多相關(guān)TypeScript基本概念和用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

js動(dòng)態(tài)添加事件并可傳參數(shù)示例代碼
js動(dòng)態(tài)添加事件可以搜索到很多的相關(guān)文章，不過(guò)可以傳參數(shù)的就沒(méi)有幾個(gè)了，下面有個(gè)不錯(cuò)的示例可以滿足大家對(duì)傳參的需求，感興趣的各位不要錯(cuò)過(guò)
2013-10-10
關(guān)于javascript中dataset的問(wèn)題小結(jié)
本文給大家介紹javascript中dataset的問(wèn)題詳解，包括dataset的基礎(chǔ)用法，使用dataset的作用以及dataset的基礎(chǔ)操作等相關(guān)問(wèn)題，對(duì)javascript dataset問(wèn)題感興趣的朋友一起學(xué)習(xí)吧
2015-11-11
JavaScript模塊管理的簡(jiǎn)單實(shí)現(xiàn)方式詳解
這篇文章主要介紹了JavaScript模塊管理的簡(jiǎn)單實(shí)現(xiàn)方式,它方便組織你的代碼，提高項(xiàng)目的可維護(hù)性。一個(gè)項(xiàng)目的可維護(hù)性高不高，也體現(xiàn)一個(gè)程序員的水平，在如今越來(lái)越復(fù)雜的前端項(xiàng)目，這一點(diǎn)尤為重要。,需要的朋友可以參考下
2019-06-06
javascript中bind函數(shù)的作用實(shí)例介紹
bind()的方法在ie,6,7,8中不適用，需要擴(kuò)展通過(guò)擴(kuò)展Function prototype可以實(shí)現(xiàn)此方法，下面為大家介紹下javascript中bind函數(shù)的作用
2014-09-09
JS CSS文章查看系統(tǒng)
自己寫(xiě)了個(gè)JS+CSS的小東西，用來(lái)看提升用戶體驗(yàn)的。 Name：WindowsTextShow；
2008-12-12
慕課網(wǎng)題目之js實(shí)現(xiàn)抽獎(jiǎng)系統(tǒng)功能
這篇文章主要為大家詳細(xì)介紹了慕課網(wǎng)題目之js抽獎(jiǎng)系統(tǒng)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
javascript作用域容易記錯(cuò)的兩個(gè)地方分析
javascript作用域容易記錯(cuò)的兩個(gè)地方分析，學(xué)習(xí)js的朋友可以參考下
2012-06-06
淺析$(function) ready和onload 的區(qū)別
新手剛學(xué)習(xí)js和jq的時(shí)候難免會(huì)接觸題目所標(biāo)識(shí)的相關(guān)內(nèi)容，下面小編通過(guò)本教程給大家講解(function) ready和onload 的區(qū)別，感興趣的朋友一起看看吧
2016-09-09
canvas實(shí)現(xiàn)弧形可拖動(dòng)進(jìn)度條效果
本篇文章主要介紹了canvas實(shí)現(xiàn)弧形可拖動(dòng)進(jìn)度條的實(shí)例方法，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-05-05
SyntaxHighlighter 3.0.83使用筆記
本文主要介紹了SyntaxHighlighter的配置及代碼的使用，并附上在博客園中使用SyntaxHighlighter 3.0.83的案例，非常實(shí)用，這里推薦給大家。
2015-01-01