mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
fix(curriculum): correct casing for TypeScript (#67147)
This commit is contained in:
@@ -6276,11 +6276,11 @@
|
|||||||
"lab-digital-pet-game": {
|
"lab-digital-pet-game": {
|
||||||
"title": "Build a Digital Pet Game",
|
"title": "Build a Digital Pet Game",
|
||||||
"intro": [
|
"intro": [
|
||||||
"In this lab, you'll practice what you learned about Typescript and React by building a digital pet game."
|
"In this lab, you'll practice what you learned about TypeScript and React by building a digital pet game."
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"review-typescript": {
|
"review-typescript": {
|
||||||
"title": "Typescript Review",
|
"title": "TypeScript Review",
|
||||||
"intro": [
|
"intro": [
|
||||||
"Before you take the TypeScript quiz, you should review everything you've learned so far.",
|
"Before you take the TypeScript quiz, you should review everything you've learned so far.",
|
||||||
"Open up this page to review all of the concepts taught including data types in TypeScript, generics, type narrowing and more."
|
"Open up this page to review all of the concepts taught including data types in TypeScript, generics, type narrowing and more."
|
||||||
@@ -6288,7 +6288,7 @@
|
|||||||
},
|
},
|
||||||
"quiz-typescript": {
|
"quiz-typescript": {
|
||||||
"title": "TypeScript Quiz",
|
"title": "TypeScript Quiz",
|
||||||
"intro": ["Test what you've learned on Typescript with this quiz."]
|
"intro": ["Test what you've learned on TypeScript with this quiz."]
|
||||||
},
|
},
|
||||||
"review-front-end-libraries": {
|
"review-front-end-libraries": {
|
||||||
"title": "Front-End Libraries Review",
|
"title": "Front-End Libraries Review",
|
||||||
|
|||||||
+1
-1
@@ -19,7 +19,7 @@ Or maybe you're looking for something a bit more practical? Consider an AI assis
|
|||||||
|
|
||||||
An icon pack, such as _VS Code Great Icons_, can help make your file tree cleaner and easier to parse at a glance. And an extension like _Colorize_ can help you understand the values in your CSS properties.
|
An icon pack, such as _VS Code Great Icons_, can help make your file tree cleaner and easier to parse at a glance. And an extension like _Colorize_ can help you understand the values in your CSS properties.
|
||||||
|
|
||||||
You'll also want language-specific extensions for your projects. If you are using JavaScript, you will likely want _ESLint_ and _Prettier_ to lint and format your code. If you are using TypeScript, you might want _Pretty Typescript Errors_ for easier to read messages.
|
You'll also want language-specific extensions for your projects. If you are using JavaScript, you will likely want _ESLint_ and _Prettier_ to lint and format your code. If you are using TypeScript, you might want _Pretty TypeScript Errors_ for easier to read messages.
|
||||||
|
|
||||||
Finally, you can also have a bit of fun with your editor. _VS Code Pets_ offers configurable virtual pets to keep you company while you squash some bugs.
|
Finally, you can also have a bit of fun with your editor. _VS Code Pets_ offers configurable virtual pets to keep you company while you squash some bugs.
|
||||||
|
|
||||||
|
|||||||
+1
-1
@@ -119,7 +119,7 @@ The final four blocks are where the magic really happens.
|
|||||||
run: pnpm run test
|
run: pnpm run test
|
||||||
```
|
```
|
||||||
|
|
||||||
We have an `Install Dependencies` block, which installs the npm packages. Our `Lint Source Files` block runs the linter, the `Verify Build` block ensures that the Typescript code can compile, and the `Run Tests` block runs the unit tests.
|
We have an `Install Dependencies` block, which installs the npm packages. Our `Lint Source Files` block runs the linter, the `Verify Build` block ensures that the TypeScript code can compile, and the `Run Tests` block runs the unit tests.
|
||||||
|
|
||||||
The important thing to know about actions is, by default, if one of these steps fails the remaining ones will be skipped and the entire run will be marked as a failure.
|
The important thing to know about actions is, by default, if one of these steps fails the remaining ones will be skipped and the entire run will be marked as a failure.
|
||||||
|
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo
|
|||||||
|
|
||||||
#### --text--
|
#### --text--
|
||||||
|
|
||||||
What is Typescript?
|
What is TypeScript?
|
||||||
|
|
||||||
#### --distractors--
|
#### --distractors--
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
id: 6724e296dceca21b82426229
|
id: 6724e296dceca21b82426229
|
||||||
title: Typescript Review
|
title: TypeScript Review
|
||||||
challengeType: 31
|
challengeType: 31
|
||||||
dashedName: review-typescript
|
dashedName: review-typescript
|
||||||
---
|
---
|
||||||
@@ -255,4 +255,4 @@ Here are descriptions of the compiler options used in the example above:
|
|||||||
|
|
||||||
# --assignment--
|
# --assignment--
|
||||||
|
|
||||||
Review the Typescript topics and concepts.
|
Review the TypeScript topics and concepts.
|
||||||
|
|||||||
+1
-1
@@ -12,7 +12,7 @@ You have a working circle area calculation logic now. You can type in a radius a
|
|||||||
However, if you continue writing this way for rectangles and triangles, things will become a clutter of loose variables and repeated logic. To prevent this, you can structure the data using **interfaces**, and create a function that handles all area calculation cases.
|
However, if you continue writing this way for rectangles and triangles, things will become a clutter of loose variables and repeated logic. To prevent this, you can structure the data using **interfaces**, and create a function that handles all area calculation cases.
|
||||||
|
|
||||||
|
|
||||||
An interface defines the structure of an object by specifying its property types. Here's what an interface looks like in Typescript.
|
An interface defines the structure of an object by specifying its property types. Here's what an interface looks like in TypeScript.
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
interface Footballer {
|
interface Footballer {
|
||||||
|
|||||||
+7
-7
@@ -7,7 +7,7 @@ dashedName: step-18
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
Your `getElement` function needs a return type. In Typescript, a return type is the type of value a function gives back when it is done running.
|
Your `getElement` function needs a return type. In TypeScript, a return type is the type of value a function gives back when it is done running.
|
||||||
|
|
||||||
Here's how to specify a return type:
|
Here's how to specify a return type:
|
||||||
|
|
||||||
@@ -23,14 +23,14 @@ For the return type of the `getElement` function, make it `HTMLElement`.
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
Your `getElement` function should have a return type of `HTMLElement`.
|
Your `getElement` function should have a return type of `HTMLElement`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const explorer = await __helpers.Explorer(code);
|
const explorer = await __helpers.Explorer(code);
|
||||||
const { getElement } = explorer.allFunctions;
|
const { getElement } = explorer.allFunctions;
|
||||||
assert.isTrue(
|
assert.isTrue(
|
||||||
getElement.hasReturnAnnotation('HTMLElement')
|
getElement.hasReturnAnnotation('HTMLElement')
|
||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
# --seed--
|
# --seed--
|
||||||
|
|||||||
+4
-4
@@ -9,7 +9,7 @@ dashedName: step-4
|
|||||||
|
|
||||||
Now you can start by implementing the area of circle calculation. You would have to select the elements for it and cast the selection using the `as` keyword.
|
Now you can start by implementing the area of circle calculation. You would have to select the elements for it and cast the selection using the `as` keyword.
|
||||||
|
|
||||||
The `as` keyword is used for type assertions. It tells Typescript to treat a value as a specific type without changing the value itself. This is useful when Typescript cannot automatically know the exact type of a value. Here's a typical usage of it:
|
The `as` keyword is used for type assertions. It tells TypeScript to treat a value as a specific type without changing the value itself. This is useful when TypeScript cannot automatically know the exact type of a value. Here's a typical usage of it:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
const container = document.getElementById("main-section") as HTMLElement;
|
const container = document.getElementById("main-section") as HTMLElement;
|
||||||
@@ -34,9 +34,9 @@ assert.match(__helpers.removeJSComments(code), /const\s+circleGroup\s*=/);
|
|||||||
You should cast the `circleGroup` selection as `HTMLElement`.
|
You should cast the `circleGroup` selection as `HTMLElement`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const explorer = await __helpers.Explorer(code);
|
const explorer = await __helpers.Explorer(code);
|
||||||
const { circleGroup } = explorer.variables;
|
const { circleGroup } = explorer.variables;
|
||||||
assert.isTrue(circleGroup.value.hasCast("HTMLElement"));
|
assert.isTrue(circleGroup.value.hasCast("HTMLElement"));
|
||||||
```
|
```
|
||||||
|
|
||||||
# --seed--
|
# --seed--
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
"isUpcomingChange": true,
|
"isUpcomingChange": true,
|
||||||
"dashedName": "review-typescript",
|
"dashedName": "review-typescript",
|
||||||
"challengeOrder": [
|
"challengeOrder": [
|
||||||
{ "id": "6724e296dceca21b82426229", "title": "Typescript Review" }
|
{ "id": "6724e296dceca21b82426229", "title": "TypeScript Review" }
|
||||||
],
|
],
|
||||||
"helpCategory": "JavaScript"
|
"helpCategory": "JavaScript"
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user