الدرس 02 · Typing JavaScript

Basic types

لم يُترجم بعد؛ يُعرض باللغة الإنجليزية

A type annotation labels a variable's box with the kind of value it may hold. Step through a six-line program as "Mia" goes into a string box, 12 into a number box, true into a boolean box and a list into a number[] box that grows, then watch tsc refuse the string "twelve" in a number box with error TS2322, before anything runs.

9 دقيقة9 خطوات5 أسئلةBeginner

شكل 2 · تفاعلي

جارٍ تحميل الرسم…

أو ← →

اختبر نفسك

5 أسئلة سريعة

اختر إجابة لتعرف السبب. تُحفَظ نتيجتك مع تقدّمك.

01In let age: number = 12;, what does : number do?

A type annotation, written after a colon, says which kind of value the variable may hold. age can get new values, but each must be a number.

02Which type do you use for 12.5 in TypeScript?

JavaScript has one kind of number, so TypeScript has one type for all of them: number covers 12, -3 and 12.5 alike. There is no int or float.

03What can a boolean hold?

boolean has exactly two values, true and false. Write the type in lowercase: boolean, not Boolean.

04scores has type number[]. Which line does tsc reject?

number[] is a list whose items are all numbers. "A" is a string, so tsc reports error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

05After let age: number = 12;, what happens with age = "twelve";?

A variable's type never changes. tsc reports: Type 'string' is not assignable to type 'number'. It finds this before anything runs.

المصطلحات الأساسية

المسرد

Variable: A named box that holds a value, made with let. Its value can change; in TypeScript its type cannot.
Type annotation: A type written after a name and a colon, like : string in let user: string, saying what the box may hold.
string: The type for text, written in quotes: "Mia", "" or "Hello, world!".
number: The type for every number, whole or decimal: 12, -3, 12.5. TypeScript has no separate int or float.
boolean: The type with only two values: true and false.
Array type: A list type such as number[] (also written Array<number>): every item must be a number.
any: A special type that switches the check off for a variable. An escape hatch to avoid while learning.
TS2322: tsc's error code for putting a value of one type into a place that needs another, such as a string into a number variable.

تفاصيل إضافية

الملاحظات والمصادر

There is also a type called any. It switches the check off for that box, so any value goes in. It is an escape hatch; avoid it while you learn.
You can often leave the label off: let age = 12 still makes age a number, because tsc works it out from the value. The next lesson is about this.
tsc 5.9 with no settings writes var instead of let in the JavaScript file, because its default target is an old version of JavaScript. The labels are removed either way.
The first box is called user, not name: a top-level variable called name clashes with the browser's built-in window.name in tsc's default setup.

اختبار يتاح بعد الخطوة الأخيرة.