Mulai hari ini kami memulai serangkaian publikasi dari terjemahan yang diadaptasi dan ditambah " TypeScript
. "
Setiap nilai yang masuk, JavaScript
saat melakukan operasi apa pun padanya, berperilaku dengan cara tertentu. Ini mungkin terdengar abstrak, tetapi sebagai contoh, mari kita coba melakukan beberapa operasi pada variabel message
:
// `toLowerCase` // message.toLowerCase() // `message` message()
toLowerCase
. message
.
, , message
— — , .
-
message
? -
toLowerCase
? - ,
toLowerCase
? - , ?
, , , , .
, message
:
const message = 'Hello World'
, , , message.toLowerCase()
, .
? JS
, , :
TypeError: message is not a function // : message —
, .
, , JS
, , (type) — . TypeError
— , 'Hello World'
.
, string
number
, (runtime) typeof
. , , . , :
function fn(x) { return x.flip() }
, , flip
, JS
. , fn
, JS
. .
— , fn
, . JS
— () — , , .
, .
TypeError
, , string
. (bugs) .
, . , , TS
. . TS
, , , .
const message = 'Hello!' message() // This expression is not callable. Type 'String' has no call signatures. . 'String'
TS
, ( ).
,
— , JS
, . ECMAScript
, - .
, , . , , . , undefined
:
const user = { name: 'John', age: 30 } user.location // undefined
TS
, , :
const user = { name: 'John', age: 30 } user.location // Property 'location' does not exist on type '{ name: string; age: number; }'. 'location' ...
«» (catch) , .. ( ) .
:
const announcement = «Hello World!»; // ? announcement.toLocaleLowercase(); announcement.toLocalLowerCase(); // , announcement.toLocaleLowerCase();
- ,
function flipCoin() { // `Math.random()` return Math.random < 0.5; // Operator '<' cannot be applied to types '() => number' and 'number'. '<' ... }
const value = Math.random() < 0.5 ? «a» : «b»; if (value !== «a») { // ... } else if (value === «b») { // This condition will always return 'false' since the types 'a' and 'b' have no overlap. 'false', 'a' 'b' // , }
,
TS
. ? . TS
, , ( ), . , TS
. , TS
, « » , , .. , , , ..
tsc
, TS
tsc
:
yarn global add tsc
#
npm i -g tsc
hello.ts
:
// console.log('Hello World!')
() JS
:
tsc hello.ts
. , , . . , hello.js
. hello.ts
, TS
. , , .
. hello.ts
:
function greet(person, date) { console.log(`Hello, ${person}! Today is ${date}.`) } greet('John')
tsc hello.ts
, :
Expected 2 arguments, but got 1. 2 , 1
TS
, greet
, .
, , , hello.js
. , TS
. JS-, , , TS
. , , TS
, --noEmitOnError
. hello.ts
:
tsc --noEmitOnError hello.ts
, hello.js
.
TS
, person
— string
, date
— Date
. toDateString()
date
:
function greet(person: string, date: Date) { console.log(`Hello, ${person}! Today is ${date.toDateString().}`) }
, , (type annotations) person
date
, greet
.
TS
, :
function greet(person: string, date: Date) { console.log(`Hello, ${person}! Today is ${date.toDateString()}.`); } greet('John', Date()); // Argument of type 'string' is not assignable to parameter of type 'Date'. 'string' 'Date'
Date()
. , Date
, new Date()
:
greet('John', new Date());
, TS
(infer) :
const msg = 'Hello!' // const msg: string
greet
JS
tsc
. :
«use strict»; function greet(person, date) { console.log(«Hello « + person + «! Today is « + date.toDateString() + «.»); } greet(«John», new Date());
:
person
date
.
« » — , ( ```) — (+).
, , JS
( ECMAScript
, ), , JS
, , TS
.
, (downleveling), , , JS-, ECMAScript 2015
(ES6
), , ECMAScript 3
(ES3
). ( ) ES6
, TS
ES3
, . , , --target
. , tsc --target es2015 hello.ts
.
, TS
, . --strict
"strict": true
tsconfig.json
. , , noImplicitAny
strictNullChecks
.
noImplicitAny
—TS
,any
. , . ,TS
.noImplicitAny
,any
strictNullChecks
—null
undefined
. , , .strictNullChecks
null
undefined
,
10% !
